<template>
  <view class="sidebar">
    <view class="menu-item" v-for="item in menuList" :key="item.id" @click="handleMenuItemClick(item.path)">
      {{ item.name }}
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  menuList: {
    type: Array,
    default: () => []
  }
});

const emits = defineEmits(['menu-item-click']);

const handleMenuItemClick = (path) => {
  emits('menu-item-click', path);
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  height: 100vh;
  padding-top: 20px;
}

.menu-item {
  padding: 10px 20px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #e0e0e0;
}
</style>